import React, { useState, useEffect } from "react";
import {
  Button,
  Input,
  Form,
  Popconfirm,
  Table,
  Typography,
  Modal,
  Transfer,
  Select,
  DatePicker,
  Tree,
} from "antd";
import { DownOutlined, FormOutlined, DeleteOutlined } from "@ant-design/icons";

import "./InteriorUser.css";

const { Option } = Select;
const handleChange = (value) => {
  console.log(`selected ${value}`);
};
const { RangePicker } = DatePicker;

const treeData = [
  {
    title: "菜单权限",
    key: "0-0",
    children: [
      {
        title: "组织结构",
        key: "0-0-0",
        children: [
          {
            title: "公司设置",
            key: "0-0-0-0",
          },
          {
            title: "角色设置",
            key: "0-0-0-1",
          },
          {
            title: "权限设置",
            key: "0-0-0-2",
          },
          {
            title: "用户设置",
            key: "0-0-0-3",
          },
          {
            title: "修改密码",
            key: "0-0-0-4",
          },
          {
            title: "组别设置",
            key: "0-0-0-5",
          },
          {
            title: "区域设置",
            key: "0-0-0-6",
          },
          {
            title: "码表维护",
            key: "0-0-0-7",
          },
        ],
      },
      {
        title: "产品管理",
        key: "0-0-1",
        children: [
          {
            title: "产品列表",
            key: "0-0-1-0",
          },
          {
            title: "产品类别设置",
            key: "0-0-1-1",
          },
          {
            title: "产品组合属性配置",
            key: "0-0-1-2",
          },
          {
            title: "Pfila属性设置",
            key: "0-0-1-3",
          },
          {
            title: "费用调整项期初设置",
            key: "0-0-1-4",
          },
          {
            title: "第三方费用基础设置",
            key: "0-0-1-5",
          },
        ],
      },
      {
        title: "parent 1-2",
        key: "0-0-2",
        children: [
          {
            title: "leaf",
            key: "0-0-2-0",
          },
          {
            title: "leaf",
            key: "0-0-2-1",
          },
        ],
      },
    ],
  },
  {
    title: "功能权限",
    key: "0-1",
    children: [
      {
        title: "组织结构",
        key: "0-1-0",
      },
      {
        title: "组织结构",
        key: "0-1-1",
      },
      {
        title: "组织结构",
        key: "0-1-2",
      },
      {
        title: "组织结构",
        key: "0-1-3",
      },
    ],
  },
];

export default function InteriorUser() {
  const [treeHeight, setTreeHeight] = useState(0);
  useEffect(() => {
    setTreeHeight(document.body.offsetHeight * 0.6);
  }, []);
  const onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };

  //表格区数据
  const Column = [
    {
      title: "权限ID",
      dataIndex: "id",
      width: "20px",
      // editable: true,
      align: "center",
    },
    {
      title: "权限名称",
      dataIndex: "name",
      width: "100px",
      align: "center",
      // editable: true,
    },
    {
      title: "权限类型",
      dataIndex: "type",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "URL",
      dataIndex: "url",
      align: "center",
      width: "20px",
      // editable: true,
    },
    {
      title: "父亲ID",
      dataIndex: "parentId",
      width: "20px",
      align: "center",
      // editable: true,
    },
    {
      title: "二级域名",
      dataIndex: "sld",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "图标",
      dataIndex: "icon",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "排序索引",
      dataIndex: "rankIndex",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "维护人",
      dataIndex: "maintainer",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "维护日期",
      dataIndex: "date",
      width: "100px",
      align: "center",
      // editable: true,
    },
    {
      title: "备注",
      dataIndex: "note",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "操作",
      dataIndex: "operation",
      width: "200px",
      align: "center",
      // editable: true,
      render: () => {
        return (
          <>
            <Typography.Link
            // disabled={editingKey !== ""}
            // onClick={() => edit(record)}
            // style={{ marginRight: 10 }}
            >
              <FormOutlined />
            </Typography.Link>
            <Typography.Link
            // disabled={editingKey !== ""}
            // onClick={showDelModal}
            // style={{ marginRight: 10 }}
            >
              <DeleteOutlined />
            </Typography.Link>
          </>
        );
      },
    },
  ];
  const data = [
    {
      id: "201",
      name: "资料管理基本-功能",
      type: "功能权限",
      url: "/idsNS/common",
      parentId: "189",
      sld: "ids",
      icon: "/",
      rankIndex: "3",
      maintainer: "嫦娥",
      date: "2022-09-11",
      note: "/",
    },
  ];
  return (
    <>
      {/* 查询表单 */}
      <Form>
        <div className="headForm1">
          <Form.Item label="员工编号" name="id">
            <Input style={{ width: 120 }} placeholder="员工编号" />
          </Form.Item>
          <Form.Item label="姓名" name="name">
            <Input style={{ width: 120 }} placeholder="姓名" />
          </Form.Item>
          <Form.Item label="电话" name="tel">
            <Input style={{ width: 120 }} placeholder="电话" />
          </Form.Item>
          <Form.Item label="Email" name="email">
            <Input style={{ width: 120 }} placeholder="Email" />
          </Form.Item>
        </div>
        <div className="headForm1">
          <Form.Item label="城市" name="city">
            <Input style={{ width: 120 }} placeholder="城市" />
          </Form.Item>
          <Form.Item label="组别" name="group">
            <Input style={{ width: 120 }} placeholder="组别" />
          </Form.Item>
          <Form.Item label=" 员工级别" name="level">
            <Select style={{ width: 120 }} onChange={handleChange}>
              <Option value="初级">初级</Option>
              <Option value="初级">中级</Option>
              <Option value="高级">高级</Option>
              <Option value="高级">资深</Option>
            </Select>
          </Form.Item>
          <Form.Item label="入职时间" name="time">
            <RangePicker />
          </Form.Item>
        </div>
        <div className="headForm1">
          <Form.Item label="用户类型" name="type">
            <Select style={{ width: 120 }} onChange={handleChange}>
              <Option value="内部员工(非销售人员)-在职">
                内部员工(非销售人员)-在职
              </Option>
              <Option value="内部员工(销售-直客)-在职">
                内部员工(销售-直客)-在职
              </Option>
              <Option value="内部员工(销售-大客)-在职">
                内部员工(销售-大客)-在职
              </Option>
              <Option value="内部员工(销售-总包推广)-在职">
                内部员工(销售-总包推广)-在职
              </Option>
              <Option value="内部员工(非销售人员)-离职">
                内部员工(非销售人员)-离职
              </Option>
              <Option value="内部员工(销售-直客)-离职">
                内部员工(销售-直客)-离职
              </Option>
              <Option value="内部员工(销售-大客)-离职">
                内部员工(销售-大客)-离职
              </Option>
              <Option value="内部员工(销售-总包推广)-离职">
                内部员工(销售-总包推广)-离职
              </Option>
            </Select>
          </Form.Item>
          <Form.Item label="状态" name="status">
            <Select style={{ width: 120 }} onChange={handleChange}>
              <Option value="全部">全部</Option>
              <Option value="在职">在职</Option>
              <Option value="离职">离职</Option>
            </Select>
          </Form.Item>
          <Form.Item label="角色" name="role">
            <Select style={{ width: 120 }} onChange={handleChange}>
              <Option value="销售部">销售部</Option>
              <Option value="运营部">运营部</Option>
              <Option value="广州分公司">广州分公司</Option>
              <Option value="深圳分公司">深圳分公司</Option>
              <Option value="北京分公司">北京分公司</Option>
            </Select>
          </Form.Item>
          <Form.Item label="直接上级" name="leader">
            <Input style={{ width: 120 }} placeholder="直接上级" />
          </Form.Item>
        </div>
        <Form.Item className="btn">
          <Button type="default">重置</Button>
          <Button type="primary">查询</Button>
        </Form.Item>
      </Form>
      <div className="tableCon">
        {/* 树状控件 */}
        <div className="treeCon">
          {treeHeight && (
            <Tree
              showLine
              switcherIcon={<DownOutlined />}
              defaultExpandedKeys={["0-0-0"]}
              onSelect={onSelect}
              treeData={treeData}
              height={treeHeight}
            />
          )}
        </div>
        {/* 表格 */}
        <div className="table">
          <Table
            rowKey="id"
            bordered={true}
            columns={Column}
            scroll={{ x: "max-content" }}
            dataSource={data}
          ></Table>
        </div>
      </div>
    </>
  );
}
